<template>
  <div class="table-list">
    <JLDatagrid
      :data="data"
      ref="tableRef"
      :table-config="tableConfig"
      :column-config="tableColumn"
      @selection-change="selectionChange"
    >
      <template #resCoverSlot="{ row }">
        <el-image v-if="row.resCover" :src="retFilePath(row.resCover)" class="avatar" />
        <img v-else src="@/assets/png/default-bg.png" />
      </template>
      <template #handleStateSlot="{ row }">
        <div @click="onOption(row)" :class="getStateClass(row)">
          {{ stateMap.get(row.handleState) || '' }}
        </div>
      </template>
      <template #uploadTimeSlot="{ row }">
        <div>{{ dayjs(row.uploadTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </template>
      <template #fileSizeSlot="{ row }">
        <div>{{ transferMb(row.fileSize) }}Mb</div>
      </template>
    </JLDatagrid>
  </div>
</template>
<script setup lang="ts">
import Sortable from 'sortablejs';
import { mergerFile } from '@/api/common';
import { reProcess } from '@/api/resource';
import { IResource } from '@/api/resource/types';
import { JLDatagrid, IColumnConfig, ITableConfig } from '@jl/element-plus';
import { retFilePath, transferMb } from '@/utils';
import { dayjs } from 'element-plus';
import { thumbnailDataItem } from '../types';
defineOptions({
  name: 'tableList',
});
interface IProps {
  data: thumbnailDataItem[];
}

const props = withDefaults(defineProps<IProps>(), {
  data: () => [],
});

const emit = defineEmits(['operationalDataChange', 'checkboxChange', 'editDialog']);
const tableConfig = ref<ITableConfig>({
  index: false,
  selection: true,
});

const selRow = ref<null | IResource>(null);
const tableColumn = ref<IColumnConfig[]>([
  { label: '资源名称', prop: 'fileResName' },
  {
    label: '版本',
    prop: 'fileResName',
  },
  { label: '处理状态', prop: 'handleState', slotName: 'handleStateSlot' },
  {
    label: '数据格式',
    prop: 'fileType',
  },
  {
    label: '数据大小',
    prop: 'fileSize',
    slotName: 'fileSizeSlot',
  },
  {
    label: '更新时间',
    prop: 'uploadTime',
    slotName: 'uploadTimeSlot',
  },
]);
const stateMap = new Map([
  [1, '处理中'],
  [2, '完成'],
  [3, '失败'],
  [21, '继续上传'], // 等待上传
  [22, '继续上传'], // 等待合并

  [23, '处理中'], // 合并中
  [24, '处理中'], // 完成合并
  [25, '重新转换'], // 合并失败

  [32, '处理中'], // 解压缩中
  [33, '处理中'], // 完成解压
  [34, '重新转换'], // 解压失败

  [42, '处理中'], // 数据处理中
  [43, '完成处理'], // 完成处理
  [44, '重新转换'], // 处理失败

  [52, '处理中'], // 传输中
  [53, '完成'], // 传输完成
  [54, '重新转换'], // 传输失败

  [63, '完成'], // 发布成功
  [64, '处理失败'], // 发布失败
]);
const isReUpload = ref(false);

const getStateClass = (row: any) => {
  if (row.handleState === 53 || row.handleState === 63) {
    return 'option-state-success';
  } else if (stateMap.get(row.handleState) === '处理中') {
    return 'option-state-running';
  } else if (row.handleState === 21 || row.handleState === 22) {
    return 'option-state-reupload';
  } else {
    return 'option-state-reoption';
  }
};

async function onOption(item: IResource) {
  if ([21, 22, 23].includes(item.handleState)) {
    // 上传失败，合并失败走重新上传的逻辑
    isReUpload.value = true;
    selRow.value = item || null;
    emit('editDialog', { isReUpload: true, selRow: item || null });
  } else if (item.handleState === 25) {
    await mergerFile({ transId: item.transId });
    emit('operationalDataChange', true);
  } else {
    const fData = new FormData();
    fData.set('resourceId', item.resourceId);
    const param = {
      data: fData,
    };
    await reProcess(param);
    emit('operationalDataChange', true);
  }
}

// 拖拽功能
const tableRef = ref();

const initSortable = () => {
  const el1 = tableRef.value.$el.querySelector('.el-table__body tbody');
  Sortable.create(el1, {
    onEnd: (evt: Event) => {
      console.log('999');
    },
  });
};

const selectionChange = async (res: any) => {
  await props.data.forEach((item) => {
    item.checkbox = false;
  });
  await res.forEach((item: any) => {
    const index = props.data.findIndex((it: any) => item.resourceId === it.resourceId);
    props.data[index].checkbox = true;
  });
  emit('checkboxChange', props.data);
};

watch(
  () => props.data,
  () => {
    // initSortable();
  }
);
</script>

<style lang="less" scoped>
.table-list {
  position: relative;
  min-width: 0;
  height: 500px;
  display: flex;
  flex-direction: column;
  height: 100%;

  .jl-datagrid {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    .el-table__header th {
      background-color: #ffededed;
    }
    .el-table .el-table__cell {
      padding: 0 !important;
    }
  }
}

.resource-list {
  position: relative;

  :deep(.total) {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.search-btn {
  text-align: right;
}
.option-state-success {
  position: relative;
  color: #161616;
  font-size: 14px;
  padding-left: 16px;
  &::before {
    content: '';
    width: 7px;
    height: 7px;
    left: 0;
    background-color: #00f763;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    border-radius: 4px;
  }
}

.option-state-reupload {
  color: #0560fd;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.option-state-reoption {
  color: #0560fd;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.option-state-running {
  position: relative;
  color: #161616;
  font-size: 14px;
  padding-left: 16px;
  &::before {
    content: '';
    width: 7px;
    height: 7px;
    left: 0;
    background-color: #faad14;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    border-radius: 4px;
  }
}
.el-image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}
.up-resource {
  .svg-icon {
    margin-right: 7px;
    font-size: 12px;
  }
}
</style>
